'use strict';

import React from 'react';
import { Dialog,Button,Loading,Form,Input,Checkbox,Tag,Icon  } from 'qnui';
import { Row, Col } from 'qnui/lib/grid';
import Radio,{ Group as RadioGroup } from 'qnui/lib/radio';
import ZhekouTags from 'components/zhekou-tags/index';
import {ajax} from 'utils/index';
import './index.scss';
const FormItem = Form.Item;
class FormMjs1Step2 extends React.Component {
	constructor(props) {
        super(props);
        this.state={
        		postAreaDialog:false,
        		area:[],
        		exclude_area:[]
        	}
    }

	componentDidMount(){
		const exclude_area = this.props.field.getValue("exclude_area");
		if(exclude_area){
			this.setState({exclude_area});
		}
	}

	clickJianQian(){
		const is_decrease_money = this.props.field.getValue("is_decrease_money");
		if(is_decrease_money){
			this.props.field.setValue("is_decrease_money",false);
			//this.props.dispatch(actions.setField("is_decrease_money",false));
		}else{
			this.props.field.setValue("is_decrease_money",true);
			this.props.field.setValue("is_discount",false);
			//this.props.dispatch(actions.setField("is_decrease_money",true));
			//this.props.dispatch(actions.setField("is_discount",false));
		}
		this.props.field.reset("discount_rate");
	}
	clickDaZhe(){
		const is_discount = this.props.field.getValue("is_discount");
		if(is_discount){
			this.props.field.setValue("is_discount",false);
			//this.props.dispatch(actions.setField("is_discount",false));
		}else{
			this.props.field.setValue("is_discount",true);
			this.props.field.setValue("is_decrease_money",false);
			//this.props.dispatch(actions.setField("is_discount",true));
			//this.props.dispatch(actions.setField("is_decrease_money",false));
		}
		this.props.field.reset("decrease_amount");
	}
	checkAmount(rule,val,callback){
		const ex =  new RegExp(/^\d+(\.([1-9]|\d[1-9]))?$/);
		const is_manyuan = this.props.field.getValue("is_decrease_money");
		if(is_manyuan && !ex.test(val) ){
			callback('支持2位小数，末尾不为0');
		}else{
			callback();
		}
	}
	checkRate(rule,val,callback){
		const ex = new RegExp(/^\d{1}(\.([1-9]|\d[1-9]))?$/);
		const is_manjian = this.props.field.getValue("is_discount");
		if(is_manjian && (!ex.test(val))){
			callback('请输入0.01-9.99');
		}else{
			callback();
		}
	}
	handleShowAreas(){
		if(this.state.area.length==0){
			const _self=this;
			ajax({
				  api: 'getAreas',
				  method: 'GET',
				  data:{}
				},(json) => {
				  //成功后
					_self.setState({area:json.areas.area});
				},(json) => {
					  //失败后
					 Dialog.alert({content:"获取地区信息失败"+json.msg+(json.sub_msg?json.sub_msg:"")});
				});
		}
		this.setState({"postAreaDialog":true});
		
	}
	onAreaClose(){
		this.setState({"postAreaDialog":false});
	}
	handleOnAreaSelect(area,isSelect){
		const exclude_area = this.state.exclude_area;
		if(isSelect && exclude_area.indexOf(area)<0){
 		   exclude_area.push(area);
 	   }else{
 		   const id = exclude_area.indexOf(area);
 		   exclude_area.splice(id,1);
 	   }
		this.setState({exclude_area});
		this.props.field.setValue("exclude_area",exclude_area);
		this.props.setExcludeArea(exclude_area);
		//this.props.dispatch(actions.setArea(area,isSelect));
	}
  render() {
		const init = this.props.field.init;
		const formItemLayout = this.props.formItemLayout;
		const exclude_area_display = this.props.field.getValue("is_free_post")=="true"?"block":"none";
		return (
		<div>
				<Dialog style={{width:"600px",height:"360px"}} 
						visible = {this.state.postAreaDialog}
				        onOk = {this.onAreaClose.bind(this)}
				        onCancel = {this.onAreaClose.bind(this)}
				        onClose = {this.onAreaClose.bind(this)} 
						title = "选择不包邮地区"
						>
						<Row justify="center">
						    <h3>
						    {
						    	this.state.area.map((area,key)=>{
						    		var isSelect = false;
						    		this.state.exclude_area.map((s_area)=>{
						    			if(s_area.id==area.id){
						    				isSelect=true;
						    			}
						    		});
									if(area.type==2){
										return (<Tag key={key} animation="false" defaultSelected={isSelect} onSelect={this.handleOnAreaSelect.bind(this,area)}>{area.name}</Tag>);
									}
								})
							}
						    </h3>
						</Row>
				</Dialog>
				<FormItem
					label="减钱设置"
					{...formItemLayout}>
					<label>
		            <FormItem label="减" >
		            	<Input  size="large" {...init('decrease_amount', {rules:[{validator:this.checkAmount.bind(this)}]})} placeholder="减钱设置" style={{width:"100px"}}  />元
		            		&nbsp;
		            	<Checkbox {...init('is_decrease_money', {initValue: false,valueName: 'checked'})} onClick={this.clickJianQian.bind(this)} />
		            </FormItem>
		         </label>
			  </FormItem>
			  <FormItem
						label="打折设置"
						{...formItemLayout}>
						<label>
							<FormItem label="打" >
			            <Input  size="large" {...init('discount_rate', {rules:[{validator:this.checkRate.bind(this)}]})} placeholder="打折设置" style={{width:"100px"}}  />折
			            &nbsp;
			            <Checkbox {...init('is_discount', {initValue: false,valueName: 'checked'})} onClick={this.clickDaZhe.bind(this)}/>
			            </FormItem>
			        </label>
			  </FormItem>
			  <FormItem
					label="包邮设置"
					{...formItemLayout}>
					<RadioGroup {...init('is_free_post', {initValue: 'false',rules: [{required: true}]})} style={{marginLeft:"10px"}} >
						<Radio id="need_fee" value="false">不包邮</Radio>
						<Radio id="no_fee" value="true">包邮</Radio>
					</RadioGroup>
			  </FormItem>
	
			  <FormItem
					label="不包邮地区"
					{...formItemLayout} style={{display:exclude_area_display}}>
					<div style={{minHeight:"60px",width:"200px",border:"dashed 1px #666"}}>
						{
							this.state.exclude_area.map((area,key)=>{
								return <Tag key={key}  selected={true} onSelect={this.handleOnAreaSelect.bind(this,area)}>{area.name}</Tag>;
							})
						}
						<Tag shape="link"><Icon type="add" size="small"  onClick={this.handleShowAreas.bind(this)} /></Tag> 
					</div>
			  </FormItem>
		</div>
    );
  }
}

export default FormMjs1Step2;
